<template>
      <MainHeader v-show="headerStatus"/>
      <MainNav v-show="showNav"/>
      <div class="sub-container">
        <Loading  v-show="loading" />
        <div id="micro-container" v-show="!loading">
          子应用内容
        </div>
      </div>
      <Footer />
 
</template>

<script>
import { ref } from 'vue'
import MainHeader from './components/Header.vue'
import MainNav from './components/MainNav.vue'
import Loading from './components/Loading.vue'
import Footer from './components/Footer'

import { loading } from './store'
// import MicroBody from './view/micro-body.vue';


// import BreadCrumbs from './components/BreadCrumbs'

// 控制头部和底部显示
import { headerState, navState, footerState, crumbsState } from './store'
import { useRoute, useRouter } from 'vue-router'
import { watch } from 'vue'
import { routerLink } from './store/routerLink'
import { loginStatus } from './store/login'

export default {
  name: 'App',
  components: {
    MainHeader,
    MainNav,
    Footer,
    Loading,
    // MicroBody,
    // Footer,
    // BreadCrumbs,
  },

  setup() {
     console.log('loading==', loading)
    return {
      loading: loading.loadingStatus,
      headerStatus: headerState.headerStatus,
      showNav: navState.navStatus
      // showFooter: footerState.showFooter,
      // breadCrumbsList: crumbsState.breadCrumbsList,
    }
  }
}
</script>

<style lang="scss">
html, body, #micro_web_main_app{
  width: 100%;
  height: 100%;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.sub-container {
  position: relative;
  height: calc(100vh - 240px);
}
#mirco-container {
  height: 100%;
  width: 100%;
  overflow-y: auto;
}
</style>
